<template>
    <div id="userCenter">
        <van-nav-bar
                title="用户中心"
                left-arrow
                :fixed=true
                :border=false
                @click-left="$router.go(-1)"
        ></van-nav-bar>
        <div class="logout">
            <button @click="logout">退出登录</button>
        </div>
    </div>
</template>

<script>
    import { getLogOut } from './../../../service/api/index'
    import { mapMutations } from 'vuex'
    import { Toast } from 'vant'
    export default {
        name: "UserCenter",
        methods:{
            ...mapMutations(['RESET_USER_INFO','CLEAR_CART']),
            async logout(){
                let result = await getLogOut()
                if(result.success_code === 200 ) {
                    //清空本地数据
                    this.RESET_USER_INFO()
                    //清空本地购物车数据
                    this.CLEAR_CART()
                    Toast({
                        message:'退出登录成功',
                        duration:500
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .logout{
        width: 100%;
        height: 2.5rem;
        margin-top: 4rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #userCenter{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #F5F5F5;
        z-index: 200;
    }

    .logout button{
        background-color: transparent;
    }
</style>